<template>
    <div>
        <el-row>
            <h3 class="CommentTitle">(99+条真实用户评论)</h3>
            <el-row>
                <el-col :span="4" class="CommentNum">
                    <el-rate
                        style="padding-bottom: 10px;"
                        v-model="value"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}分"
                    >
                    </el-rate>
                    <p>总评数：{{ data.all_remarks }}</p>
                    <p>好评数：{{ data.good_remarks }}</p>
                    <p>差评数：{{ data.bad_remarks }}</p>
                </el-col>
                
                <el-col class="box">

                </el-col>

                <el-col :span="6" class="round">
                    <div>
                    <el-progress
                    :width='80'  
                        type="circle"
                        :percentage="data.scores.environment*10"
                        :color="customColors"
                        :format="format"
                        :stroke-width='4'
                    >
                    </el-progress>
                    <span>环境</span>
                    </div>
                    
                     <div>
                         <el-progress   
                         :width='80'                       
                        type="circle"
                        :percentage="data.scores.product*10"
                        :color="customColors"
                        :format="format"
                        :stroke-width='4'
                    ></el-progress>
                    <span>产品</span>
                     </div>
                    
                    <div>
                        <el-progress 
                        :width='80'                     
                        type="circle"
                        :percentage="data.scores.service*10 || 76"
                        :color="customColors"
                        :format="format"
                        :stroke-width='4'
                    ></el-progress>
                    <span>服务</span>
                    </div>
                    
                </el-col>
            </el-row>
        </el-row>
    </div>
</template>
<script>
export default {
    props: ["data"],
    data() {
        return {
            value: this.data.stars,
            customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#ff8a00', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],     
        };
    },
    methods: {
      format(percentage) {
        return (percentage / 10).toFixed(0);
      }
    }
};
</script>
<style lang='less' scoped>
.CommentTitle {
    margin-bottom: 20px;
}
.box {
    width: 210px;
    height: 74px;
}
.CommentNum {
    margin-bottom: 10px;
        P {
            padding-bottom: 10px;
        }
}
.round {
    padding-left: 10px;
    display: flex;
    .el-progress {
        padding: 0 20px;
    }
    div{
        text-align: center;
        
        span{
            color:#ff8a00;
            font-size: 18px;
        }
    }
}
</style>